<template>
  <div class="news flex">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">最新动态</div>
    <div class="main">
      <swiper-banner
        :carouselArr="newsBannerArr"
        class="swiper-container-news"
        v-if="newsBannerArr && newsBannerArr.length > 0"
      >
        <swiper-slide class="swiper-slide" v-for="(item,index) in newsBannerArr" :key="index">
          <router-link :to="{path: '/news-details', query:{id: item.id}}">
            <img :src="item.img_url" :alt="item.title" />
            <p class="banner-title">{{item.title}}</p>
          </router-link>
        </swiper-slide>
      </swiper-banner>
      <div class="padding">
        <div class="about-search">
          <form>
            <input
              name="city"
              v-model="keywords"
              @keyup.enter.native="submit"
              type="text"
              placeholder="关键词搜索"
              class="city-name"
            />
            <button @click.prevent="submit" type="submit" class="search-store">搜索</button>
          </form>
        </div>
      </div>
      <div class="news-list">
        <tab :line-width="2" active-color="#000" v-model="index">
          <tab-item
            :selected="selected === index"
            v-for="(item, index) in newsTabArr"
            :key="index"
            @on-item-click="getTabList(index, item.name)"
          >
            <span class="keyword-name">{{item.name}}</span>
          </tab-item>
        </tab>
        <div class="tab-swiper vux-center">
          <div class="news-li" v-for="(item, index) in newsListArr" :key="index">
            <router-link :to="{path: '/news-details', query:{ id: item.id, type: type }}">
              <div class="news-li-hd">
                <img :src="item.img_url" :alt="item.title" />
              </div>
              <div class="news-li-bd">
                <p class="news-li-bd_title">{{item.title}}</p>
                <p class="news-li-bd_desc">{{item.tags}}</p>
              </div>
            </router-link>
          </div>
          <div class="more" v-if="show" @click="more">加载更多</div>
        </div>
      </div>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
import swiperBanner from "@/components/Swiper/Swiper";
import { getNews } from "@/api/index";
import { Tab, TabItem } from "vux";
import { mapGetters } from "vuex"
export default {
  components: {
    swiperBanner,
    Tab,
    TabItem
  },
  data() {
    return {
      newsListArr: [],
      newsTabArr: [],
      newsBannerArr: [],
      selected: 0,
      index: 0,
      keywords: "",
      page: 1,
      show: true
    };
  },
  mounted() {
    this.getNewsFun(0, this.keywords);
  },
  computed: {
    ...mapGetters(["type"])
  },
  methods: {
    getType(type) {
      this.$store.dispatch("setType/getType", type);
    },
    submit() {
      this.getNewsFun(1, this.keywords);
    },
    getNewsFun(type, name) {
      let obj = {
        keywords: name,
        page: this.page
      };
      getNews(obj).then(res => {
        const { code, msg, data } = res;
        if (code == 200) {
          this.show = data.rows.length < 6 ? false : true;
          if (type == 0) {
            data.keylist.unshift({
              name: "全部"
            });
            this.newsBannerArr = data.rows.slice(0, 6);
            this.newsTabArr = data.keylist;
          } else if (type == 1) {
            this.newsListArr = [];
            this.newsListArr = data.rows;
            return;
          }
          this.newsListArr = this.newsListArr.concat(data.rows);
        }
      });
    },
    getTabList(index, name) {
      let name_k = name == "全部" ? "" : name;
      this.page = 1;
      this.selected = index;
      this.getNewsFun(1, name_k);
    },
    more() {
      this.page++;
      this.getNewsFun();
    }
  }
};
</script>

<style lang="less" scoped>
.news-li {
  a {
    display: flex;
    padding: 0.36rem 0.27rem;
    color: #000;

    .news-li-hd img {
      display: block;
      width: 2.17rem;
      // height: 1.63rem;
    }

    .news-li-bd {
      margin-left: 0.18rem;

      .news-li-bd_title {
        font-weight: bold;
        font-size: 0.28rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .news-li-bd_desc {
        text-align: justify;
        color: #6d6d6d;
        font-size: 0.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }
    }
  }
}

.swiper-container-news {
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }

  .banner-title {
    position: absolute;
    bottom: 0.72rem;
    left: 0.36rem;
    color: #fff;
    font-size: 0.28rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.27rem 0.18rem;
  }
}

.padding {
  padding: 0 0.21rem;

  .about-search {
    position: relative;
    width: 100%;
    height: 0.81rem;
    margin: 0.18rem 0;
    border: 1px solid #000;
    box-sizing: border-box;

    form {
      width: 100%;
      height: 100%;
    }

    .city-name {
      display: block;
      width: 100%;
      height: 100%;
      padding-left: 1em;
      box-sizing: border-box;
    }

    .search-store {
      position: absolute;
      top: 0;
      right: 0;
      width: 1.9rem;
      text-align: center;
      padding-left: 0.27rem;
      height: 100%;
      background: url(../../assets/img/f_search.png) no-repeat center left
        0.45rem #2e2e2e;
      color: #fff;
      font-size: 0.25rem;
    }
  }
}

.news-list {
  margin-bottom: 0.36rem;

  .keyword-name {
    display: block;
    white-space: nowrap;
  }

  .more {
    text-align: center;
  }
}
</style>
